<template>

	<view class="">
		<view class="container">
			<view class="demo">
			
			</view>
			<view class="header">
				<view class="">
					<image class="user-avatar" :src="rq.imgUrl(model.avatar)" />
					<text class="user-name">{{model.nickname}}</text>
				</view>
				<view class="balance">
					<text style="margin-right:16rpx;">¥</text>
					 {{model.balance}}
				</view>
				<view style="margin-top: 10rpx;line-height: 40rpx;">
					账户余额（元）
				</view>
				<!-- <text class="account-balance"></text> -->
				<view @click="toCash" class="withdraw-button">提现</view>
			</view>
			<view class="tabs">
				<text class="tab" :class="params.type?'':'active'" @click="search()">全部</text>
				<text class="tab" :class="params.type==='INC'?'active':''" @click="search('INC')">收入</text>
				<text class="tab" :class="params.type==='DEC'?'active':''" @click="search('DEC')">支出</text>
			</view>
			<view class="transaction-list">
				<view class="transaction-item" v-for="item,index in list">
					<view class="transaction-bottom">
						<text class="transaction-type">{{item.title?item.title:''}}</text>
						<text class="transaction-amount transaction-right"
							:class="item.type=='INC'?'inc':item.type=='DEC'?'dec':''">{{(item.type=='INC'?'+':item.type=='DEC'?'-':'')+item.money}}元</text>
					</view>
					<view class="transaction-bottom">
						<text class="transaction-date">{{item.createtime}}</text>
						<text class=" hui transaction-right ">{{item.before}}元</text>
					</view>
					<text class="transaction-order">订单编号：{{item.order_no}}</text>
					<view class="status" v-if="item.status">
						<text v-if="item.status=='created'" class="created">审核中</text>
						<text v-if="item.status=='successed'" class="successed">审核通过</text>
						<text v-if="item.status=='rejected'" class="rejected">审核驳回</text>
					</view>
					<view class="transaction-order" v-if="item.memo">
						{{item.memo}}
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {},
				list: [],
				total: 0,
				params: {
					page: 1,
					type: ''
				}
			};
		},
		onLoad() {
			this.rq.getData('Withdraw/index').then(res => {
				this.model = res.data
			})
			this.getList()
		},
		onReachBottom() {
			if (this.list.length > this.total) {
				this.params.page++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.params.page = 1;
			uni.hideNavigationBarLoading();
			this.getList()
		},
		methods: {
			getList(more) {
				this.rq.getData('Withdraw/log', this.params).then(res => {
					this.total = res.data.total
					if (more) {
						this.list = [...this.list, ...res.data.data]
					} else {
						this.list = res.data.data
					}
					uni.stopPullDownRefresh()
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			search(type) {
				this.params.page = 1
				this.params.type = type ? type : ''
				this.getList()
			},
			toCash() {
				uni.navigateTo({
					url: '/pages/mySet/cashOut/cashOut'
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.hui {
		color: #999999;
	}

	.transaction-bottom {
		margin-bottom: 14rpx;
	}

	.demo {
		height: 322rpx;
		background: linear-gradient(180deg, #FFD3D7 -2%, rgba(255, 206, 191, 0) 100%);
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
	}

	.container {
		position: relative;
		padding: 14rpx 30rpx;
		// width: 100%;
		// position: absolute;
		// top: 0;
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #fff;
	}

	.header {
		background-image: url(https://pw.qyang.cc/static/my/yue.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 260rpx;
		/* display: flex; */
		align-items: center;
		/* background-color: #ff6f61; */
		padding: 50rpx 28rpx 50rpx 50rpx;
		border-radius: 20rpx;
		color: white;
		position: relative;

		.balance {
			margin-top: 35rpx;
			font-size: 60rpx;
			font-weight: bold;
			line-height: 50rpx;
		}
	}

	.user-avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-name {
		/* flex: 1; */
		font-size: 28rpx;
		position: absolute;
		top: 60rpx;
	}

	.account-balance {
		font-size: 48rpx;
		font-weight: bold;
	}

	.withdraw-button {
		position: absolute;
		width: 124rpx;
		height: 56rpx;
		line-height: 56rpx;
		background-color: white;
		color: #FF7681;
		/* padding: 10rpx 20rpx; */
		text-align: center;
		border-radius: 31rpx;
		right: 32rpx;
		bottom: 54rpx;
		z-index: 10;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		margin: 20rpx 0;
	}

	.tab {
		font-size: 32rpx;
		color: #999;
	}

	.tab.active {
		color: #000;
		font-weight: bold;
		position: relative;
		
		&::after{
			position: absolute;
			content: '';
			width: 60rpx;
			height: 6rpx;
			border-radius: 6rpx;
			background: #FF7681;
			bottom: -6rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.transaction-list {
		// border-top: 1rpx solid #eee;
	}

	.transaction-item {
		width: 100%;
		/* display: flex; */
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.transaction-type {
		font-size: 32rpx;
		color: #333;
	}

	.transaction-right {
		float: right;
		padding-right: 30rpx;
	}

	.status {
		font-size: 24rpx;
		margin-top: 14rpx;

		.created {
			color: #BB8DFC;
		}

		.successed {
			color: #00BC56;
		}

		.rejected {
			color: #FF7681;
			text-decoration: underline;
		}
	}

	.transaction-date,
	.transaction-order,
	.transaction-amount,
	.transaction-balance,
	.transaction-status,
	.transaction-reason,
	.transaction-activity {
		font-size: 24rpx;
		color: #999;
	}

	.transaction-amount {

		// color: #ff6f61;
		&.inc {
			color: #FF7681;
		}

		&.dec {
			color: #00BC56;
		}
	}

	.transaction-status,
	.transaction-reason,
	.transaction-activity {
		color: #999;
	}
</style>